
<template>
    <header>
        <div class="header">
            <div class="header-left">
                <div class="header-left-title">无线监护设备</div>
                <div class="header-left-desc" >当前设备在线数<span class="header-left-count" >{{state.deviceData.length}}</span>台</div>
            </div>
            <img
                    class="header-right"
                    src="@/assets/logo.png"
                    alt=""
            >
        </div>
    </header>
    <main>
        <div class="search">
            <el-input v-model.trim="searchVal" class="search-input"  placeholder="请输入设备编号/病人住院号/病人姓名进行搜索" clearable>
                <template #append>
                    <el-button type="primary">
                        搜索
                    </el-button>
                </template>
            </el-input>
        </div>
        <div class="main-content">
            <InfoCord v-for="item in showData" :key="item.deviceId" :cardData="item"/>
        </div>
    </main>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted } from 'vue'
import InfoCord from '@/components/info-card/index.vue'
import { getActiveDevices } from '@/api/index'
import { errorHandling } from '@/api/error-handling'
import { useDeviceStore } from '@/stores/device-store'
import {useEquipmentInfoStore} from '@/stores/equipment-info-store'
const searchVal = ref()
const state = reactive({
    deviceData: []
})

const showData: any = computed(() => {
    if(!searchVal.value) return state.deviceData
    return state.deviceData.filter((item: any) => {
        return item.deviceId.indexOf(searchVal.value) !==-1 || item.bedId.indexOf(searchVal.value) !==-1  || item.patientName.indexOf(searchVal.value) !==-1
    })
})
const store = useDeviceStore()
// 定义一个函数来封装你的代码逻辑
function updateDeviceData() {
    errorHandling(getActiveDevices, null, res => {
        state.deviceData = res.data;
        store.setDevice(state.deviceData);
        const dataMap: Record<string, any> = {};
        state.deviceData.forEach((item: any) => {
            dataMap[item.deviceId] = item;
        });
        localStorage.setItem('devices', JSON.stringify(dataMap));
    });
}
updateDeviceData();
// 使用setInterval来每10秒（10000毫秒）调用一次updateDeviceData函数
setInterval(updateDeviceData, 10000);
// onMounted(() => {
//   const infoStore = useEquipmentInfoStore()
//   const token = localStorage.getItem('token')
//   let mysocket
//   mysocket = new WebSocket(`ws://8.142.111.107:8080/login?token=${token}`);
//   mysocket.addEventListener("open", () => {
//       console.log('连接成功')
//   })
//   mysocket.addEventListener('message', (e) => {
//     // console.log(JSON.parse(e.data))
//     infoStore.setEquipmentInfo(JSON.parse(e.data))
//   })
// })
</script>
<style lang="less" scoped>
.header {
  display: flex;
  align-items: center;
  background-color: #f0f2f5;
  position: relative;
  height: 80px;
  .header-left {
    margin-left: 24px;
    .header-left-title {
      position: relative;
      font-size: 14px;
      font-weight: 600;
      color: #262727;
      padding-left: 12px;

    }
    .header-left-title::before {
      position: absolute;
      left: 0;
      top: 10%;
      height: 70%;
      content: '';
      width: 3px;
      background-color: rgb(0 154 255);
    }
    .header-left-count {
      font-size: 24px;
      color: rgb(0 154 255);
    }
  }
  .header-right {
    position: absolute;
    display: flex;
    top: 10px;
    right: 50%;
    height: 60px;
    transform: translateX(50%);
  }
}
main {
  height: calc(100vh - 80px);
  overflow: auto;
  background-color: #11131a;
  padding: 24px;
  .search {
    margin-bottom: 24px;
    text-align: right;
    .search-input {
      width:400px;
    }
  }
  .main-content {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-gap:  24px 16px;
  }
}
</style>
